<template>
	<view class="container" :style="appThemeStyle">
		<!-- <tree-node :tree-data="treeData" :uselast="true" @callBack="tree_node_back"></tree-node> -->
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
		  @up="upCallback">
		  <!-- 订单列表 -->
		  <view class="order-list">
		    <view class="order-item" v-for="(item, index) in treeData" :key="index">
		      <view class="item-top">
		        <view class="item-top-left">
		          <text class="order-time">用户ID：{{item.user_id}}</text>
		        </view>
		        <view class="item-top-right">
		          <text class="state-text">{{ happenTimeFun(item.last_login_time) }}</text>
		        </view>
		      </view>
		      <!-- 商品列表 -->
		      <view class="goods-list">
		        <view class="goods-item">
		          <!-- 商品信息 -->
		          <view class="goods-content">
		            <view class="goods-title"><text class="twoline-hide">用户昵称</text></view>
					<view class="goods-title"><text class="twoline-hide">手机号</text></view>
					<view class="goods-title"><text class="twoline-hide">余额</text></view>
					<view class="goods-title"><text class="twoline-hide">性别</text></view>
					<view class="goods-title"><text class="twoline-hide">地址</text></view>
		          </view>
		          <!-- 交易信息 -->
		          <view class="goods-trade">
		            <view class="goods-price">
		              <text class="value">{{item.nick_name}}</text>
		            </view>
		            <view class="goods-price">
		              <text class="value">{{item.mobile}}</text>
		            </view>
					<view class="goods-price">
					  <text class="value">{{item.balance}}</text>
					</view>
					<view class="goods-price">
					  <text class="value">{{item.gender}}</text>
					</view>
					<view class="goods-price">
					  <text class="value">{{item.province || '-'}}{{item.city || '-'}}</text>
					</view>
		          </view>
		        </view>
		      </view>
		    </view>
		  </view>
		</mescroll-body>
	</view>
</template>

<script>
	  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	  import * as UserApi from '@/api/user'
	  import TreeNode from '@/components/tree-node/index.vue'
	  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
	  // 每页记录数量
	  const pageSize = 15
	  export default {
		mixins: [MescrollMixin],
	    components: { 
			TreeNode
		},
	    data() {
	      return {
			  // treeData: [{
					// 	  id: 1,
					// 	  name: '用户1',
					// 	  ishow: false,
					// 	  isopen: false,
					// 	  children: [{
					// 			  id: 2,
					// 			  name: '子1-用户1',
					// 			  ishow: false,
					// 			  isopen: false,
					// 			  children: []
					// 		  },
					// 		  {
					// 			  id: 3,
					// 			  name: '子2-用户1',
					// 			  ishow: false,
					// 			  isopen: false,
					// 			  children: [{
					// 				  id: 4,
					// 				  name: '孙1-子2-用户1',
					// 				  ishow: false,
					// 				  isopen: false,
					// 				  children: []
					// 			  }]
					// 		  },
					// 	  ],
					//   },
					//   {
					// 	  id: 5,
					// 	  name: '用户2',
					// 	  ishow: false,
					// 	  isopen: false,
					// 	  children: [{
					// 			  id: 6,
					// 			  name: '子1-用户2',
					// 			  ishow: false,
					// 			  isopen: false,
					// 			  children: [{
					// 				  id: 8,
					// 				  name: '孙1-子1-用户2',
					// 				  ishow: false,
					// 				  isopen: false,
					// 				  children: [{
					// 					  id: 8,
					// 					  name: '重1-孙1-子1-用户2',
					// 					  ishow: false,
					// 					  isopen: false,
					// 					  children: [{
					// 						  id: 9,
					// 						  name: '曾1-重1-孙1-子1-用户2',
					// 						  ishow: false,
					// 						  isopen: false,
					// 						  children: [{
					// 							  id: 9,
					// 							  name: '僧1-曾1-重1-孙1-子1-用户2',
					// 							  ishow: false,
					// 							  isopen: false,
					// 							  children: []
					// 						  }]
					// 					  }]
					// 				  }]
					// 			  }]
					// 		  },
					// 		  {
					// 			  id: 7,
					// 			  name: '子2-用户2',
					// 			  ishow: false,
					// 			  isopen: false,
					// 			  children: [{
					// 				  id: 8,
					// 				  name: '孙1-子2-用户2',
					// 				  ishow: false,
					// 				  isopen: false,
					// 				  children: [{
					// 					  id: 8,
					// 					  name: '重1-孙1-子2-用户2',
					// 					  ishow: false,
					// 					  isopen: false,
					// 					  children: [{
					// 						  id: 9,
					// 						  name: '曾1-重1-孙1-子2-用户2',
					// 						  ishow: false,
					// 						  isopen: false,
					// 						  children: [{
					// 							  id: 9,
					// 							  name: '僧1-曾1-重1-孙1-子2-用户2',
					// 							  ishow: false,
					// 							  isopen: false,
					// 							  children: []
					// 						  }]
					// 					  }]
					// 				  }]
					// 			  }]
					// 		  },
					// 	  ],
					//   },
				 //  ],
			  treeData: [],
			  // 上拉加载配置
			  upOption: {
			    // 首次自动执行
			    auto: true,
			    // 每页数据的数量; 默认10
			    page: { size: pageSize },
			    // 数量要大于4条才显示无更多数据
			    noMoreSize: 4,
			    // 空布局
			    empty: {
			      tip: '亲，暂无我的用户'
			    }
			  },
			  userId: '' , // 用户id
			  canReset:false
		  }
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onLoad(options) {
			this.userId = uni.getStorageSync('userId') || 0
			// 注册全局事件订阅: 是否刷新订单列表
			uni.$on('syncRefreshs', canReset => {
			  this.canReset = canReset
			})
		},
		
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
		 this.canReset && this.onRefreshList()
		 this.canReset = false
		},
		/**
		 * 生命周期函数--监听页面的卸载
		 */
		onUnload() {
		  // 卸载全局事件订阅
		  uni.$off('syncRefreshs')
		},
		methods: {
			tree_node_back: function(e) {
				if (e.mydetail) {
					this.tree_node_back(e.mydetail)

				} else {
					console.log("tree_node_back=222==", JSON.stringify(e))
				}
			},
			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
			  console.log(page)
			  const app = this
			  // 设置列表数据
			  app.getOrderList()
			    .then(list => {
					console.log(list)
					app.treeData = list
					const curPageLen = list.length
					const totalSize = list.length
			        app.mescroll.endBySize(curPageLen, totalSize)
			    })
			    .catch(() => app.mescroll.endErr())
			},
			
			// 获取订单列表
			getOrderList() {
			  const app = this
			  return new Promise((resolve, reject) => {
			    UserApi.getSonUsers({user_id: app.userId }, { load: false })
			      .then(result => {
			        // 合并新数据
					console.log(result.data)
			        resolve(result.data)
			      })
			  })
			},
			// 刷新订单列表
			onRefreshList() {
			  this.treeData = getEmptyPaginateObj()
			  setTimeout(() => {
			    this.mescroll.resetUpScroll()
			  }, 120)
			},
			happenTimeFun(num){//时间戳数据处理		
				if(num) {
					if(num && String(num).length <= 10) {
						num = num *1000
					}
					let date = new Date(num);		
					//时间戳为10位需*1000，时间戳为13位的话不需乘1000			
			        let y = date.getFullYear();			
			        let MM = date.getMonth() + 1;			
			        MM = MM < 10 ? ('0' + MM) : MM;//月补0			
			        let d = date.getDate();			
			        d = d < 10 ? ('0' + d) : d;//天补0			
			        let h = date.getHours();			
			        h = h < 10 ? ('0' + h) : h;//小时补0			
			        let m = date.getMinutes();			
			        m = m < 10 ? ('0' + m) : m;//分钟补0			
			        let s = date.getSeconds();			
			        s = s < 10 ? ('0' + s) : s;//秒补0			
			        return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s;
				} else {
					return ''
				}
			},
		}
	  }
</script>

<style lang="scss" scoped>
   .container{
	   background: #fff;
   }
   // 项目内容
   .order-item {
     margin: 20rpx auto 20rpx auto;
     padding: 30rpx 30rpx 0 30rpx;
     width: 94%;
     box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
     border-radius: 16rpx;
     background: #fff;
   }
   
   // 项目顶部
   .item-top {
     display: flex;
     justify-content: space-between;
     font-size: 26rpx;
     margin-bottom: 16rpx;
   	padding-bottom: 20rpx;
   	border-bottom: 1rpx solid #eee;
   
     .order-time {
       color: #777;
     }  
     .state-text {
       color: $main-bg;
     }
   }   
   // 商品列表
   .goods-list {   
     // 商品项
     .goods-item {
       display: flex;  
       // 商品内容
       .goods-content {
         flex: 0.3;
         padding-top: 16rpx;
   
         .goods-title {
           font-size: 26rpx;
           max-height: 76rpx;
   		  margin-bottom: 25rpx;
   		  line-height: 40rpx;
         }
       }
   
       // 交易信息
       .goods-trade {
         padding-top: 16rpx;
         width: 150rpx;
         text-align: left;
         color: $uni-text-color-grey;
         font-size: 26rpx;
         flex: 1;
         .goods-price {
           vertical-align: bottom;
           margin-bottom: 25rpx;
   		  line-height: 40rpx;
         }
       }   
     }
   }
   // 订单操作
   .order-handle {
     .btn-group {
   
       .btn-item {
         border-radius: 10rpx;
         padding: 8rpx 20rpx;
         margin-left: 15rpx;
         font-size: 26rpx;
         float: right;
         color: #383838;
         border: 1rpx solid #a8a8a8;
   
         &:last-child {
           margin-left: 0;
         }
   
         &.active {
           color: $main-bg;
           border: 1rpx solid $main-bg;
         }
       }
     }
   }
</style>